<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>

<body style="height: 100%; margin: 0">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 900px;height:700px;"></div>
    <script type="text/javascript">
        // 基于准备好的 DOM，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '生命周期',
                left: 'center',
                textStyle: {
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            },
            series: [
                {
                    name: 'Life Stage',
                    type: 'pie',
                    radius: ['40%', '70%'], // 圆环内外半径
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'outside', // 标签位置在内部
                        formatter: '{b}', // 显示文本
                        fontSize: 24,
                        fontWeight: 'bold'
                    },
                    labelLine: {
                        show: true
                    },
                    data: [
                        { value: 1, name: '备孕（爸妈）' },
                        { value: 1, name: "孕（妈妈）" },

                        { value: 1, name: "产妇" },
                        { value: 1, name: "新生儿（产后）" },
                        { value: 1, name: "托育（0-3岁）" },
                        { value: 1, name: "托幼（3-6岁）" },
                        { value: 1, name: '学龄前儿童' },
                        { value: 1, name: '学龄儿童' },

                        { value: 1, name: '小学' },
                        { value: 1, name: '中学' },
                        { value: 1, name: '青年' },

                        { value: 1, name: '大学' },
                        { value: 1, name: '中年' },
                        { value: 1, name: '年轻老年' },
                        { value: 1, name: '老年' },
                        { value: 1, name: '长寿老年' },
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>